<template>
  <PageHeader class="PageHeaderWithTitle" :disabledBack="disabledBack">
    <view slot="title" class="Title">
      <text>{{ title }}</text>
      <uni-icons
        v-if="disabledHome"
        type="home"
        class="IconHome"
        size="18px"
        color="white"
        @click="iconHomeClickHandler"
      />
    </view>
    <view class="Extra" slot="extra">
      <slot name="extra" />
    </view>
  </PageHeader>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import PageHeader from '@/components/page/PageHeader.vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {
    PageHeader,
  },
  props: {
    /**
     * 页面标题
     */
    title: String,

    /**
     * 禁用返回
     */
    disabledBack: {
      type: Boolean,
      required: false,
    },

    /**
     * 禁用Home
     */
    disabledHome: {
      type: Boolean,
      required: false,
    },
  },
  methods: {
    iconHomeClickHandler() {
      uni.switchTab({
        url: '/',
      });
    },
  },
});
</script>
<style lang="less" scoped>
.Title {
  flex-grow: 1;
  flex-shrink: 1;
  text-align: center;
  padding: 15px;
  line-height: 1;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;

  .IconHome {
    margin-left: 10px;
  }
}
.Extra {
  min-width: 30px;
}
</style>
